<script lang="ts" setup>
import { computed, reactive } from 'vue';
import { usePopupStore } from '@/store/popup';
import { storeToRefs } from 'pinia';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const popupStore = usePopupStore();
const { carBookersNumberPickerRef } = storeToRefs(popupStore);

const numbers = reactive({
  adults: 0,
  children: 0
});

const props = withDefaults(
  defineProps<{
    maxBookersNumber: number;
    adultsNumber: number;
    childrenNumber: number;
  }>(),
  {
    maxBookersNumber: 9999,
    adultsNumber: 0,
    childrenNumber: 0
  }
);

const total = computed(() => {
  return numbers.adults + numbers.children;
});

const remaining = computed(() => {
  if (total.value === 0) {
    return {
      adults: props.maxBookersNumber,
      children: props.maxBookersNumber
    };
  }
  if (total.value === props.maxBookersNumber) {
    return {
      adults: 0,
      children: 0
    };
  }
  const n = props.maxBookersNumber - total.value;
  return {
    adults: numbers.adults + n,
    children: numbers.children + n
  };
});

popupStore.onOpened('CAR_BOOKER_NUMBER', () => {
  numbers.adults = props.adultsNumber;
  numbers.children = props.childrenNumber;
});

const emit = defineEmits<{
  update: [v1: number, v2: number];
}>();

function handleConfirm() {
  popupStore.closeCarBookersNumberPicker();
  emit('update', numbers.adults, numbers.children);
}
</script>

<template>
  <apt-popup-car
    ref="carBookersNumberPickerRef"
    :showConfirmBtn="false"
    :title="t('TransferNumber')"
    title-position="left"
    @close="popupStore.closeCarBookersNumberPicker"
  >
    <view class="apt-car-bookers-number-picker-tips">
      {{ t('TransferMsg3') }}
    </view>
    <view class="apt-car-bookers-number-picker__item">
      <text>{{ t('LHKey_personNumber') }}</text>
      <apt-counter v-model="numbers.adults" :max="remaining.adults" :min="1" />
    </view>
    <view class="apt-car-bookers-number-picker__item">
      <view class="flex items-center">
        <text>{{ t('LHKey_childNumber') }}</text>
      </view>
      <apt-counter v-model="numbers.children" :max="remaining.children" />
    </view>
    <view class="apt-car-bookers-number-picker-btn">
      <view @click="handleConfirm">{{ t('LCKey_confirm') }}</view>
    </view>
  </apt-popup-car>
</template>

<style lang="scss">
.apt-car-bookers-number-picker-tips {
  font-weight: 400;
  font-size: 24rpx;
  color: #b84c16;
  line-height: 34rpx;
  background: #fff3ec;
  padding: 14rpx 24rpx;
  border-radius: 6rpx;
}

.apt-car-bookers-number-picker__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 110rpx;
  padding: 0 16rpx;
  border-top: 1rpx solid #f4f4f4;
}

.apt-car-bookers-number-picker-btn {
  padding-top: 80rpx;
  padding-bottom: 30rpx;
  view {
    height: 76rpx;
    line-height: 76rpx;
    background: #ff5a60;
    border-radius: 8rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
  }
}
</style>
